<script lang='ts' setup>
import { inject, onMounted } from 'vue'
import { Viewer, MapboxStyleImageryProvider, ProviderViewModel, OpenStreetMapImageryProvider } from 'cesium';
let baseUrl = import.meta.env.VITE_APP_BASE_URL as string
const theUrl = baseUrl.substring(1, 20)
console.log(baseUrl + '/Widgets/Images/ImageryProviders/earthAtNight.png');

const viewer = inject<Viewer>('Viewer')!
const styleIds = [
  "streets-v11",
  "outdoors-v11",
  "light-v10",
  "dark-v10",
  "satellite-v9",
  "msatellite-streets-v11",
];
const mapboxImageryProvider = new MapboxStyleImageryProvider({
  styleId: styleIds[3],
  accessToken:
    // "pk.eyJ1IjoibHM4NzAwNjEwMTEiLCJhIjoiY2tqYXZlZ2JrMDI5bTJzcDJmdDNteGhsNyJ9.0wTn4B1ce9Q4U5GnPso5iA",
    'pk.eyJ1IjoiaHVhbmd3ZW5iaW4iLCJhIjoiY2t6YzR5eW1sMWFocjJ3bGI2dGJmYml2ZyJ9.utx3K8OHJrOUhexGnB6tXw'
})
const openStreetProvider = new OpenStreetMapImageryProvider({
  url: "https://a.tile.openstreetmap.org/",
  minimumLevel: 0,
  maximumLevel: 18,
  fileExtension: "png",
});
const imageryViewModels: Array<ProviderViewModel> = []
imageryViewModels.push(new ProviderViewModel({
  name: 'Night Earth',
  iconUrl: theUrl + '/Widgets/Images/ImageryProviders/earthAtNight.png',
  tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
map of the world.\nhttp://www.openstreetmap.org',
  creationFunction: function () {
    return mapboxImageryProvider
  }
}))
imageryViewModels.push(new ProviderViewModel({
  name: 'Night Earth',
  iconUrl: theUrl + '/Widgets/Images/ImageryProviders/openStreetMap.png',
  tooltip: 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
map of the world.\nhttp://www.openstreetmap.org',
  creationFunction: function () {
    return openStreetProvider
  }
}))
onMounted(() => {
  viewer.imageryLayers.removeAll()
  viewer.imageryLayers.addImageryProvider(openStreetProvider)
  viewer.baseLayerPicker.viewModel.imageryProviderViewModels = imageryViewModels
  viewer.baseLayerPicker.viewModel.terrainProviderViewModels = []
})




</script>
<template>
  <slot></slot>
</template>
<style lang='scss' scoped>
</style>